<template>
    <div >
        <el-pagination
            :background="background"
            :current-page.sync="page"
            :page-size.sync="limit"
            :layout="layout"
            :page-sizes="pageSizes"
            :pager-count="pagerCount"
            :total="total"
            v-bind="$attrs"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script>
export default {
    name: "TablePagination",
    props: {
        total: {
            required: true,
            type: Number
        },
        currentPage: {
            type: Number,
            default: 1
        },
        pageSize: {
            type: Number,
            default: 20
        },
        pageSizes: {
            type: Array,
            default() {
                return [10, 20, 30, 50, 100, 200]
            }
        },
        // 移动端页码按钮的数量端默认值5
        pagerCount: {
            type: Number,
            default: document.body.clientWidth < 992 ? 5 : 7
        },
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next, jumper'
        },
        background: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
        };
    },
    computed: {
        page: {
            get() {
                return this.currentPage
            },
            set(val) {
                this.$emit('update:currentPage', val)
            }
        },
        limit: {
            get() {
                return this.pageSize
            },
            set(val) {
                this.$emit('update:pageSize', val)
            }
        }
    },
    methods: {
        // handleSizeChange(val) {
        //     if (this.page * val > this.total) {
        //         this.page = 1
        //     }
        //     console.log({ currentPage: this.page, pageSize: val })
        //     this.$emit('sizeChange', { currentPage: this.page, pageSize: val })
        // },
        //
        // handleCurrentChange(val) {
        //     console.log({ currentPage: val, pageSize: this.limit })
        //     this.$emit('currentChange', { currentPage: val, pageSize: this.limit })
        // },
        handleSizeChange(val) {
            if (this.page * val > this.total) {
                this.page = 1
            }
            // console.log({ currentPage: this.page, pageSize: val })
            this.$emit('sizeChange', val)
        },

        handleCurrentChange(val) {
            // console.log({ currentPage: val, pageSize: this.limit })
            this.$emit('currentChange', val)
        },
    }
}

</script>
<style scoped>

</style>
